<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>悬浮的小广告</title>
	<style>
	*{
		margin:0;
		padding: 0;
	}
	/*左侧广告条*/
	.ad{
		width: 230px;
		height: 328px;
		position: absolute;
		left: 0;
		top: 0;
	}
	/*关闭按钮*/
	.ad span{
		position: absolute;
		left: 0;
		top: 0;
		font-size: 30px;
		cursor: pointer;
	}
	/*右侧广告条*/
	.ad2{
		right: 0;
		left: auto;
	}

	</style>
	<script src="jquery-3.1.1.min.js"></script>
	<script>
	$(function(){
		function scrollad(){
			var owheight = $(window).height();//获取整个窗口的高度
			var oadheight = $('.ad').height();//获取广告的高度
			var oad = $(window).scrollTop()+(owheight-oadheight)/2;//广告的位置
			$('.ad').stop().animate({top:oad});//距离顶部位置的动画

		}

		scrollad();

		$(window).scroll(scrollad);//scroll：随着滚动条的滚动事件

	});
	</script>
</head>
<body>
	<img src="image/cctv一带一路.png" alt="">

	<div class="ad">
	<img src="image/tz15.jpg" />
	<span>&times;</span>
	</div>

	<div class="ad ad2">
	<img src="image/tz15.jpg" /><span>&times;</span>
	</div>

</body>
</html>